<template>
  <a-card title="待办事项" class="margin-bottom" :body-style="{padding: '1px 0 8px'}">
    <a-list :data-source="todoList">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-space>
            <a-checkbox name="todo-item"/>
            <span :class="'status-'+item.status">{{item.content}}</span>
          </a-space>
          <template #actions>
            {{item.time}}
            <a-tag :bordered="false" class="margin-none">优先级</a-tag>
          </template>
        </a-list-item>
      </template>
    </a-list>
    <template #extra>
      <router-link to="/task" class="hover">全部待办</router-link>
    </template>
  </a-card>
</template>

<script setup lang="ts">
const todoList = [
  {time: '上午 09:30', content: '查看今天工作内容',status:1},
  {time: '上午 10:30', content: '回复邮件',status:0},
  {time: '上午 11:00', content: '工作汇报整理',status:1},
  {time: '下午 02:00', content: '产品需求会议',status:0},
  {time: '下午 03:30', content: '整理会议内容',status:0},
  {time: '下午 06:30', content: '明天工作计划',status:0}
]
</script>

<style scoped>
.status-1{
  text-decoration: line-through;
  color: var(--color-gray);
}
</style>